/* Theme Variables - Color delegations and semantic mappings */

/* We have to redefine these color variables in order to allow dynamic
theme switching in Storybook due to the way tailwind builds its utility
classes at build time based on the @theme */

/* Non-prefixed variable delegations - point to VS Code variables */
--background: var(--vscode-background);
--foreground: var(--vscode-foreground);
--editor-foreground: var(--vscode-editor-foreground);
--editor-background: var(--vscode-editor-background);
--editorGroup-border: var(--vscode-editorGroup-border);
--editorWarning-foreground: var(--vscode-editorWarning-foreground);
--editorWarning-background: var(--vscode-editorWarning-background);
--button-foreground: var(--vscode-button-foreground);
--button-background: var(--vscode-button-background);
--button-secondaryForeground: var(--vscode-button-secondaryForeground);
--button-secondaryBackground: var(--vscode-button-secondaryBackground);
--button-hoverBackground: var(--vscode-button-hoverBackground);
--button-secondaryHoverBackground: var(--vscode-button-secondaryHoverBackground);
--dropdown-foreground: var(--vscode-dropdown-foreground);
--dropdown-background: var(--vscode-dropdown-background);
--dropdown-border: var(--vscode-dropdown-border);
--input-foreground: var(--vscode-input-foreground);
--input-background: var(--vscode-input-background);
--input-border: var(--vscode-input-border);
--focusBorder: var(--vscode-focusBorder);
--badge-foreground: var(--vscode-badge-foreground);
--badge-background: var(--vscode-badge-background);
--notifications-foreground: var(--vscode-notifications-foreground);
--notifications-background: var(--vscode-notifications-background);
--notifications-border: var(--vscode-notifications-border);
--descriptionForeground: var(--vscode-descriptionForeground);
--errorForeground: var(--vscode-errorForeground);
--list-hoverForeground: var(--vscode-list-hoverForeground);
--list-hoverBackground: var(--vscode-list-hoverBackground);
--list-focusBackground: var(--vscode-list-focusBackground);
--list-activeSelectionBackground: var(--vscode-list-activeSelectionBackground);
--list-activeSelectionForeground: var(--vscode-list-activeSelectionForeground);
--toolbar-hoverBackground: var(--vscode-toolbar-hoverBackground);
--panel-border: var(--vscode-panel-border);
--sideBar-foreground: var(--vscode-sideBar-foreground);
--sideBar-background: var(--vscode-sideBar-background);
--sideBar-border: var(--vscode-sideBar-border);
--sideBarSectionHeader-foreground: var(--vscode-sideBarSectionHeader-foreground);
--sideBarSectionHeader-background: var(--vscode-sideBarSectionHeader-background);
--sideBarSectionHeader-border: var(--vscode-sideBarSectionHeader-border);
--charts-green: var(--vscode-charts-green);
--charts-yellow: var(--vscode-charts-yellow);
--charts-red: var(--vscode-charts-red);
--charts-blue: var(--vscode-charts-blue);
--charts-orange: var(--vscode-charts-orange);
--inputValidation-infoForeground: var(--vscode-inputValidation-infoForeground);
--inputValidation-infoBackground: var(--vscode-inputValidation-infoBackground);
--inputValidation-infoBorder: var(--vscode-inputValidation-infoBorder);
--widget-border: var(--vscode-widget-border);
--textLink-foreground: var(--vscode-textLink-foreground);
--textCodeBlock-background: var(--vscode-textCodeBlock-background);
--menu-background: var(--vscode-menu-background);
--menu-foreground: var(--vscode-menu-foreground);
--disabledForeground: var(--vscode-disabledForeground);
--checkbox-background: var(--vscode-checkbox-background);
--checkbox-foreground: var(--vscode-checkbox-foreground);
--checkbox-border: var(--vscode-checkbox-border);

/* Semantic color mappings to VSCode variables */
--background: var(--vscode-editor-background);
--foreground: var(--vscode-editor-foreground);
--card: var(--vscode-editor-background);
--card-foreground: var(--vscode-editor-foreground);
--popover: var(--vscode-menu-background, var(--vscode-editor-background));
--popover-foreground: var(--vscode-menu-foreground, var(--vscode-editor-foreground));
--primary: var(--vscode-button-background);
--primary-foreground: var(--vscode-button-foreground);
--secondary: var(--vscode-button-secondaryBackground);
--secondary-foreground: var(--vscode-button-secondaryForeground);
--muted: var(--vscode-disabledForeground);
--muted-foreground: var(--vscode-descriptionForeground);
--accent: var(--vscode-list-hoverBackground);
--accent-foreground: var(--vscode-list-hoverForeground);
--destructive: var(--vscode-errorForeground);
--destructive-foreground: var(--vscode-button-foreground);
--border: var(--vscode-input-border, transparent);
--input: var(--vscode-input-background);
--ring: var(--vscode-input-border);
--chart-1: var(--vscode-charts-red);
--chart-2: var(--vscode-charts-blue);
--chart-3: var(--vscode-charts-yellow);
--chart-4: var(--vscode-charts-orange);
--chart-5: var(--vscode-charts-green);

/* Layout and Sizing Variables (theme-agnostic) */
--border-width: 1;
--corner-radius: 0;
--corner-radius-round: 2;
--design-unit: 4;
--disabled-opacity: 0.4;
--font-family:
	-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji,
	Segoe UI Emoji, Segoe UI Symbol;
--font-weight: 400;
--input-height: 26;
--input-min-width: 100px;
--type-ramp-base-font-size: 13px;
--type-ramp-base-line-height: normal;
--type-ramp-minus1-font-size: 11px;
--type-ramp-minus1-line-height: 16px;
--type-ramp-minus2-font-size: 9px;
--type-ramp-minus2-line-height: 16px;
--type-ramp-plus1-font-size: 16px;
--type-ramp-plus1-line-height: 24px;
--scrollbarWidth: 10px;
--scrollbarHeight: 10px;

/* Component Layout Variables (theme-agnostic) */
--button-icon-corner-radius: 5px;
--button-icon-outline-offset: 0;
--button-icon-padding: 3px;
--button-padding-horizontal: 11px;
--button-padding-vertical: 4px;
--checkbox-corner-radius: 3;
--dropdown-list-max-height: 200px;
--tag-corner-radius: 2px;

--text-xs: calc(var(--vscode-font-size) * 0.85);
--text-sm: calc(var(--vscode-font-size) * 0.9);
--text-base: var(--vscode-font-size);
--text-lg: calc(var(--vscode-font-size) * 1.1);

/* Border radius variables */
--radius: 0.5rem;
--radius-lg: var(--radius);
--radius-md: calc(var(--radius) - 2px);
--radius-sm: calc(var(--radius) - 4px);

/* Tailwind color delegations for semantic colors */
--color-background: var(--background);
--color-foreground: var(--foreground);
--color-card: var(--card);
--color-card-foreground: var(--card-foreground);
--color-popover: var(--popover);
--color-popover-foreground: var(--popover-foreground);
--color-primary: var(--primary);
--color-primary-foreground: var(--primary-foreground);
--color-secondary: var(--secondary);
--color-secondary-foreground: var(--secondary-foreground);
--color-muted: var(--muted);
--color-muted-foreground: var(--muted-foreground);
--color-accent: var(--accent);
--color-accent-foreground: var(--accent-foreground);
--color-destructive: var(--destructive);
--color-destructive-foreground: var(--destructive-foreground);
--color-border: var(--border);
--color-input: var(--input);
--color-ring: var(--ring);
--color-chart-1: var(--chart-1);
--color-chart-2: var(--chart-2);
--color-chart-3: var(--chart-3);
--color-chart-4: var(--chart-4);
--color-chart-5: var(--chart-5);

/* Tailwind color delegations for VS Code variables */
--color-vscode-background: var(--vscode-background);
--color-vscode-foreground: var(--vscode-foreground);
--color-vscode-editor-foreground: var(--vscode-editor-foreground);
--color-vscode-editor-background: var(--vscode-editor-background);
--color-vscode-editorGroup-border: var(--vscode-editorGroup-border);
--color-vscode-editorWarning-foreground: var(--vscode-editorWarning-foreground);
--color-vscode-editorWarning-background: var(--vscode-editorWarning-background);
--color-vscode-button-foreground: var(--vscode-button-foreground);
--color-vscode-button-background: var(--vscode-button-background);
--color-vscode-button-secondaryForeground: var(--vscode-button-secondaryForeground);
--color-vscode-button-secondaryBackground: var(--vscode-button-secondaryBackground);
--color-vscode-button-hoverBackground: var(--vscode-button-hoverBackground);
--color-vscode-button-secondaryHoverBackground: var(--vscode-button-secondaryHoverBackground);
--color-vscode-dropdown-foreground: var(--vscode-dropdown-foreground);
--color-vscode-dropdown-background: var(--vscode-dropdown-background);
--color-vscode-dropdown-border: var(--vscode-dropdown-border);
--color-vscode-input-foreground: var(--vscode-input-foreground);
--color-vscode-input-background: var(--vscode-input-background);
--color-vscode-input-border: var(--vscode-input-border, transparent);
--color-vscode-focusBorder: var(--vscode-focusBorder);
--color-vscode-badge-foreground: var(--vscode-badge-foreground);
--color-vscode-badge-background: var(--vscode-badge-background);
--color-vscode-notifications-foreground: var(--vscode-notifications-foreground);
--color-vscode-notifications-background: var(--vscode-notifications-background);
--color-vscode-notifications-border: var(--vscode-notifications-border);
--color-vscode-descriptionForeground: var(--vscode-descriptionForeground);
--color-vscode-errorForeground: var(--vscode-errorForeground);
--color-vscode-list-hoverForeground: var(--vscode-list-hoverForeground);
--color-vscode-list-hoverBackground: var(--vscode-list-hoverBackground);
--color-vscode-list-focusBackground: var(--vscode-list-focusBackground);
--color-vscode-list-activeSelectionBackground: var(--vscode-list-activeSelectionBackground);
--color-vscode-list-activeSelectionForeground: var(--vscode-list-activeSelectionForeground);
--color-vscode-toolbar-hoverBackground: var(--vscode-toolbar-hoverBackground);
--color-vscode-panel-border: var(--vscode-panel-border);
--color-vscode-sideBar-foreground: var(--vscode-sideBar-foreground);
--color-vscode-sideBar-background: var(--vscode-sideBar-background);
--color-vscode-sideBar-border: var(--vscode-sideBar-border);
--color-vscode-sideBarSectionHeader-foreground: var(--vscode-sideBarSectionHeader-foreground);
--color-vscode-sideBarSectionHeader-background: var(--vscode-sideBarSectionHeader-background);
--color-vscode-sideBarSectionHeader-border: var(--vscode-sideBarSectionHeader-border);
--color-vscode-charts-green: var(--vscode-charts-green);
--color-vscode-charts-yellow: var(--vscode-charts-yellow);
--color-vscode-charts-red: var(--vscode-charts-red);
--color-vscode-charts-blue: var(--vscode-charts-blue);
--color-vscode-charts-orange: var(--vscode-charts-orange);
--color-vscode-inputValidation-infoForeground: var(--vscode-inputValidation-infoForeground);
--color-vscode-inputValidation-infoBackground: var(--vscode-inputValidation-infoBackground);
--color-vscode-inputValidation-infoBorder: var(--vscode-inputValidation-infoBorder);
--color-vscode-widget-border: var(--vscode-widget-border);
--color-vscode-textLink-foreground: var(--vscode-textLink-foreground);
--color-vscode-textCodeBlock-background: var(--vscode-textCodeBlock-background);
--color-vscode-menu-background: var(--vscode-menu-background);
--color-vscode-menu-foreground: var(--vscode-menu-foreground);
--color-vscode-disabledForeground: var(--vscode-disabledForeground);
--color-vscode-checkbox-background: var(--vscode-checkbox-background);

/* Additional Tailwind color delegations for UI components */
--color-vscode-border-width: var(--vscode-border-width);
--color-vscode-contrast-active-border: var(--vscode-contrast-active-border);
--color-vscode-contrast-border: var(--vscode-contrast-border);
--color-vscode-corner-radius: var(--vscode-corner-radius);
--color-vscode-corner-radius-round: var(--vscode-corner-radius-round);
--color-vscode-design-unit: var(--vscode-design-unit);
--color-vscode-disabled-opacity: var(--vscode-disabled-opacity);
--color-vscode-focus-border: var(--vscode-focus-border);
--color-vscode-font-family: var(--vscode-font-family);
--color-vscode-font-weight: var(--vscode-font-weight);
--color-vscode-input-height: var(--vscode-input-height);
--color-vscode-input-min-width: var(--vscode-input-min-width);
--color-vscode-type-ramp-base-font-size: var(--vscode-type-ramp-base-font-size);
--color-vscode-type-ramp-base-line-height: var(--vscode-type-ramp-base-line-height);
--color-vscode-type-ramp-minus1-font-size: var(--vscode-type-ramp-minus1-font-size);
--color-vscode-type-ramp-minus1-line-height: var(--vscode-type-ramp-minus1-line-height);
--color-vscode-type-ramp-minus2-font-size: var(--vscode-type-ramp-minus2-font-size);
--color-vscode-type-ramp-minus2-line-height: var(--vscode-type-ramp-minus2-line-height);
--color-vscode-type-ramp-plus1-font-size: var(--vscode-type-ramp-plus1-font-size);
--color-vscode-type-ramp-plus1-line-height: var(--vscode-type-ramp-plus1-line-height);
--color-vscode-scrollbarWidth: var(--vscode-scrollbarWidth);
--color-vscode-scrollbarHeight: var(--vscode-scrollbarHeight);
--color-vscode-scrollbar-slider-background: var(--vscode-scrollbar-slider-background);
--color-vscode-scrollbar-slider-hover-background: var(--vscode-scrollbar-slider-hover-background);
--color-vscode-scrollbar-slider-active-background: var(--vscode-scrollbar-slider-active-background);
--color-vscode-button-border: var(--vscode-button-border);
--color-vscode-button-icon-background: var(--vscode-button-icon-background);
--color-vscode-button-icon-corner-radius: var(--vscode-button-icon-corner-radius);
--color-vscode-button-icon-outline-offset: var(--vscode-button-icon-outline-offset);
--color-vscode-button-icon-hover-background: var(--vscode-button-icon-hover-background);
--color-vscode-button-icon-padding: var(--vscode-button-icon-padding);
--color-vscode-button-primary-background: var(--vscode-button-primary-background);
--color-vscode-button-primary-foreground: var(--vscode-button-primary-foreground);
--color-vscode-button-primary-hover-background: var(--vscode-button-primary-hover-background);
--color-vscode-button-secondary-background: var(--vscode-button-secondary-background);
--color-vscode-button-secondary-foreground: var(--vscode-button-secondary-foreground);
--color-vscode-button-secondary-hover-background: var(--vscode-button-secondary-hover-background);
--color-vscode-button-padding-horizontal: var(--vscode-button-padding-horizontal);
--color-vscode-button-padding-vertical: var(--vscode-button-padding-vertical);
--color-vscode-checkbox-border: var(--vscode-checkbox-border);
--color-vscode-checkbox-corner-radius: var(--vscode-checkbox-corner-radius);
--color-vscode-checkbox-foreground: var(--vscode-checkbox-foreground);
--color-vscode-list-active-selection-background: var(--vscode-list-active-selection-background);
--color-vscode-list-active-selection-foreground: var(--vscode-list-active-selection-foreground);
--color-vscode-list-hover-background: var(--vscode-list-hover-background);
--color-vscode-divider-background: var(--vscode-divider-background);
--color-vscode-dropdown-list-max-height: var(--vscode-dropdown-list-max-height);
--color-vscode-input-placeholder-foreground: var(--vscode-input-placeholder-foreground);
--color-vscode-link-active-foreground: var(--vscode-link-active-foreground);
--color-vscode-link-foreground: var(--vscode-link-foreground);
--color-vscode-progress-background: var(--vscode-progress-background);
--color-vscode-panel-tab-active-border: var(--vscode-panel-tab-active-border);
--color-vscode-panel-tab-active-foreground: var(--vscode-panel-tab-active-foreground);
--color-vscode-panel-tab-foreground: var(--vscode-panel-tab-foreground);
--color-vscode-panel-view-background: var(--vscode-panel-view-background);
--color-vscode-panel-view-border: var(--vscode-panel-view-border);
--color-vscode-tag-corner-radius: var(--vscode-tag-corner-radius);
